<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		ul {
			list-style: none;
		}
		a {
			text-decoration: none;
			color: white;
		}
		body {
			min-width: 320px;
			max-width: 540px;
			margin: 50px auto;
		}
		.header {
			width: 100%;
			height: 100px;
			margin-bottom: 10px;
		}
		.header img {
			width: 100%;
			height: 100%;
		}
		.nav .nav_in {
			width: 100%;
			height: 64px;
			/* background-color: red; */
			border-radius: 8px;
			display: flex;
			border-bottom: 2px solid white;
		}
		.nav .nav_in .row1 {
			flex: 31%;
			background: #FA6954 url(images/x1.png) right bottom no-repeat;
			background-size: 80px auto;
			border-radius: 8px 0px 0px 0px;
			text-align: center;
			line-height: 64px;
			border-right: 1px solid #fff;

		}
		.nav .nav_in .row2 {
			flex: 23%;

			background: #FB7456 url(images/x2.png) left bottom no-repeat;
			
			border-right: 1px solid #fff;
			text-align: center;
			line-height: 64px;

		}
		.nav .nav_in .row3 {
			flex: 47%;
			background: #FEBF4B url(images/x3.png) right bottom no-repeat;
			background-size: 115px auto;
			border-radius: 0px 8px 0px 0px;
			text-align: center;
			line-height: 64px;
			position: relative;
		}
		.nav .nav_in .row3 .cheap {
			background-color: red;
			position: absolute;
			top: 6px;
			right: 40px;
			border-radius: 7px 7px 7px 0;
			padding: 2px 5px;
			font-size: 12px;
			line-height: 12px;

		}
		/* 第二个 */
		.nav .nav_in a.row {
			background-color: #4D97EE;
			border-right: 1px solid #fff;
			text-align: center;
			line-height: 64px;
		}
		.nav .nav_in a.r1 {
			flex: 31%;
			background: #4D97EE url(images/x5.png) right bottom no-repeat;
			background-size: 80px auto;
		}
		.nav .nav_in a.r2 {
			flex: 23%;
			background-color: #4D97EE;
		}
		.nav .nav_in a.r3 {
			flex: 23%;
			background-color: #4D97EE;

		}
		.nav .nav_in a.r4 {
			flex: 24%;
			background-color: #4D97EE;
			border: 0;

		}
		/* 第三个 */
		.nav .nav_in a.row-t {
			background-color: #6BD559;
			border-right: 1px solid #fff;
			text-align: center;
			line-height: 64px;
		}
		.nav .nav_in a.r5 {
			flex: 31%;
			background: #6BD559 url(images/x5.png) right bottom no-repeat;
			background-size: 80px auto;
			border-radius: 0 0 0 8px;
		}
		.nav .nav_in a.r6 {
			flex: 23%;
			
		}
		.nav .nav_in a.r7 {
			flex: 23%;
			

		}
		.nav .nav_in a.r8 {
			flex: 24%;
			
			border: 0;
			border-radius: 0 0 8px 0px;


		}

		/* 电话卡· */
		ul {
			padding: 10px;
			width: 100%;
			/* background-color: pink; */
			box-sizing: border-box;
			
		}
		ul li {
			float: left;
			width: 84px;
			padding: 0 0 10px 20px;
		}
		ul li a {
			font-size: 12px;
			color: #000;
		}

		ul li .phone {
			display: block;
			width: 28px;
			height: 28px;
			background:  url(images/xj.png)  no-repeat;
			background-size: 28px auto;
		}

		

		

	</style>
</head>
<body>
	<div class="header">
		<img src="images/ctrip.jpg"  alt="">
	</div>
	<div class="nav">
		<div class="nav_in">
			<a href="" class="row1">
				<span>酒店</span>
			</a>
			<a href="" class="row2">
				<span> 订单</span>
			</a>
			<a href="" class="row3">
				<span>火车/机票/轮船
                   <span class="cheap">方便又便宜</span>
				</span>

			</a>			
		</div>
		<div class="nav_in">
			<a href="" class="r1 row">
				<span>酒店</span>
			</a>
			<a href="" class="r2 row">
				<span> 订单</span>
			</a>
			<a href="" class="r3 row">
				<span> 订单</span>
			</a>
			<a href="" class="r4 row">
				<span> 订单</span>
			</a>			
		</div>
		<div class="nav_in">
			<a href="" class="r5  row-t">
				<span>酒店</span>
			</a>
			<a href="" class="r6 row-t">
				<span> 订单</span>
			</a>
			<a href="" class="r7 row-t">
				<span> 订单</span>
			</a>
			<a href="" class="r8  row-t">
				<span> 订单</span>
			</a>			
		</div>
		
	</div>
	<ul>
		<li>
			<a href="">
				
				<span class="phone"></span>
				<span>自由行</span>
			</a>
		</li>
		<li>
			<a href="">
				
				<span class="phone"></span>
				<span>自由行</span>
			</a>
		</li>
		<li>
			<a href="">
				
				<span class="phone"></span>
				<span>自由行</span>
			</a>
		</li>
		<li>
			<a href="">
				
				<span class="phone"></span>
				<span>自由行</span>
			</a>
		</li>
		<li>
			<a href="">
				
				<span class="phone"></span>
				<span>自由行</span>
			</a>
		</li>
		<li>
			<a href="">
				
				<span class="phone"></span>
				<span>自由行</span>
			</a>
		</li>
		<li>
			<a href="">
				
				<span class="phone"></span>
				<span>自由行</span>
			</a>
		</li>
		<li>
			<a href="">
				
				<span class="phone"></span>
				<span>自由行</span>
			</a>
		</li>
		<li>
			<a href="">
				
				<span class="phone"></span>
				<span>自由行</span>
			</a>
		</li>
		<li>
			<a href="">
				
				<span class="phone"></span>
				<span>自由行</span>
			</a>
		</li>
		
	</ul>
</body>
</html>